<template>
  <div class="user-container">
    <el-space :size="30">
      <el-card shadow="hover" class="user-info-card">
        <el-descriptions :title="userInfoForm.username" size="large" border :column="1">
          <template #extra>
            <el-button
              type="primary"
              color="#7069FA"
              :icon="EditPen"
              @click="changePasswordVisible = true"
              >修改密码
            </el-button>
          </template>
          <el-descriptions-item label="上一次登录时间">
            <el-tag size="small">{{ userInfoForm.lastLoginTime }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="账号已使用">
            <el-tag size="small">{{ daysBetweenDates(userInfoForm.registrationTime) }}天</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <img src="../assets/user-info-left.png" />
      </el-card>

      <el-skeleton :loading="userInfoLoading" :rows="12" animated class="user-info-card">
        <template #default>
          <el-card shadow="hover" class="user-info-card">
            <template #header>
              <div class="card-header">
                <el-button round @click="userInfoDisabled = !userInfoDisabled">
                  <el-icon :size="20"> <Edit /> </el-icon>
                </el-button>
                <el-button v-show="userInfoDisabled" type="primary" @click="updateUserInfo">
                  确定修改
                </el-button>
              </div>
            </template>
            <el-form
              label-position="right"
              label-width="auto"
              :model="userInfoForm"
              size="large"
              :disabled="!userInfoDisabled"
            >
              <el-form-item label="姓名">
                <el-input v-model="userInfoForm.name" />
              </el-form-item>
              <el-form-item label="年龄">
                <el-input-number v-model="userInfoForm.age" :min="1" :max="100" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="userInfoForm.sex">
                  <el-radio value="男">男</el-radio>
                  <el-radio value="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker v-model="userInfoForm.birthday" type="date" />
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="userInfoForm.phone" />
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input v-model="userInfoForm.email" />
              </el-form-item>
            </el-form>
          </el-card>
        </template>
      </el-skeleton>
    </el-space>
  </div>

  <el-dialog v-model="changePasswordVisible" title="修改密码" width="40%">
    <el-form :model="changePasswordForm.val" label-width="auto" label-position="right" size="large">
      <el-form-item label="旧密码">
        <el-input
          v-model="changePasswordForm.val.oldPassword"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input
          v-model="changePasswordForm.val.newPassword"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancelChangePassword">取 消</el-button>
      <el-button type="primary" @click="changePassword">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="PersonalCenterPage">
import { onMounted } from 'vue'
import { EditPen, Edit } from '@element-plus/icons-vue'
import { useUser } from '../hooks/useUser'
import { useUserInfo } from '../hooks/useUserInfo'

import { daysBetweenDates } from '../utils/dateUtils'
const { changePasswordVisible, changePasswordForm, changePassword, cancelChangePassword } =
  useUser()
const { userInfoLoading, userInfoDisabled, userInfoForm, getUserInfo, updateUserInfo } =
  useUserInfo()
onMounted(() => {
  getUserInfo()
})
</script>
<style lang="less" scoped>
.user-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .user-info-card {
    width: 500px;
    height: 485px;
    img {
      margin-top: 20px;
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
